<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
   <style>
      #face{
	   width:200px;
	   height:200px;
	   background-color:yellow;
	   border-radius:50%;
	   margin:auto;
	   position:relative;
	  }
	  #left_eye,#right_eye{
	  width:25px;
	  height:25px;
	  background-color:black;
      border-radius:50%;
	  position:absolute;
      top:50px;
	  }
	  #left_eye{
		left:30px;
	  }
	  #right_eye{
		right:30px;
	  }
	  #mouth{
	     width:120px;
		 height:60px;
		 background:red;
         border-radius:0px 0px 60px 60px;
		 position:absolute;
		 top:120px;
		 left:40px;
		 overflow:hidden;
	  }
	  #tooth{
	    width:100%;
		height:10px;
		background:white;
	  }
	  #tongue{
	    width:60px;
		height:60px;
		background:black;
		border-radius:50%;
	    position:absolute;
		top:20px;
		left:30px;
	  }
      #face:hover #left_eye{
        height:11px;
	    top:57px;
	  }
	   #face:hover #right_eye{
        height:11px;
	    top:57px;
	  }
      @keyframes show_mouth{
	    0%{
		   top:120px;
		}
		100%{
		   top:130px;
		}
	  } 
	  #face:hover #mouth{
	     animation:show_mouth 0.1s linear infinite alternate;
	  }
   </style>
 </head>
 <body>
     <div id="face">
	     <div id="left_eye"></div>
		 <div id="right_eye"></div>
		 <div id="mouth">
		    <div id="tooth"></div>
            <div id="tongue"><div>
		 </div>
	 </div>
 </body>
</html>
